<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <!-- <link rel="stylesheet" type="text/css" href="css/test1.css" /> -->

    <!-- unpkg的CDN: -->
    <link rel="stylesheet" href="https://unpkg.com/mescroll.js@1.4.1/mescroll.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.1/mescroll.min.css">
    <!-- jsdelivr的CDN: -->
    <script src="https://unpkg.com/mescroll.js@1.4.1/mescroll.min.js" charset="utf-8"></script>
    <script src="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.1/mescroll.min.js" charset="utf-8"></script>
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        width: 100%;
        background: #f9f9f9;
        font-family: Arial, Helvetica, sans-serif;
    }

    .fl {
        float: left;
    }

    .fr {
        float: right;
    }

    /* 搜索导航 */
    .nav {
        display: grid;
        grid-template-columns: 100px 2fr;
        width: 100%;
        height: 45px;
        line-height: 45px;
        text-align: center;
        background-color: #fff;
        border-radius: 2px;
    }

    #searchSchool {
        height: 28px;
        border-radius: 8px;
        border: 1px solid #797979;
        color: #797979;
        background-color: #fff;
        margin-left: 10px;
    }

    .search {
        margin-left: 10px;
    }

    .searchValue {
        height: 26px;
        border-radius: 8px;
        border: none;
        outline: none;
        border: 1px solid #797979;
        background: url('__CDN__/assets/img/enter/search.png') 4px 4px no-repeat;
        padding-left: 25px;
    }

    .searchBtn {
        background-color: #fff;
        border: none;
        margin-left: 5px;
    }

    /* 内容 */
    .content {
        font-size: 14px;
        clear: both;
        width: 100%;
        height: cal(100% -55px);
        margin-top: 10px;
        border-radius: 2px;
    }

    /* li列表 */
    .contentList {
        width: 100%;
        height: 90px;
        background-color: #fff;
        border-radius: 2px;
        font-size: 12px;
        padding-top: 10px;
        border-bottom: 1px solid #f5f5f5;
    }

    .lineOne,
    .lineTwo,
    .lineThree {
        text-align: center;
        clear: both;
        padding: 0 10px;
    }

    .lineTwo {
        clear: both;
        padding-top: 5px;
    }

    .lineThree {
        padding-top: 15px;
        color: #797979;
    }

    /* 标题 */
    .title {
        font-size: 13px;
        font-weight: bold;
    }

    /* 参加企业 */
    .joinCompany {
        color: #797979;
    }

    .applyCount {
        margin-left: 8px;
    }

    .skim {
        width: 18px;
        height: 18px;
        margin-right: 3px;
    }

    .mescroll {
        position: fixed;
        top: 44px;
        bottom: 0;
        height: auto;
        /*如设置bottom:50px,则需height:auto才能生效*/
    }
</style>

<body>
<div class="doubleElection">
    <!-- 搜索导航 -->
    <div class="nav">
        <div class="school fl">
            <select name="searchSchool" id="searchSchool">
                <option value="0">选择学校</option>
                <option value="1">长春师范大学</option>
                <option value="2">长春理工大学</option>
                <option value="3">吉林大学</option>
            </select>
        </div>
        <div class="search fl">
            <input type="text" placeholder="请输入招聘会名称" name="searchValue" class="searchValue" id="searchValue">
            <button class="searchBtn" id="searchBtn">搜索</button>
        </div>
    </div>
    <div class="content mescroll" id="mescroll">
        <ul id="contentList">
            <li class="contentList" onclick="lookInfo()">
                <div class="lineOne">
                    <div class="title fl">长春师范大学2020届毕业生线上双选会</div>
                    <div class="time fr">08:00</div>
                </div>
                <div class="lineTwo">
                    <div class="joinCompany fl">参加企业：预计200家，已参加182家</div>
                    <div class="date fr">2020-04-28</div>
                </div>
                <div class="lineThree">
                    <div class="fl">
                        <div class="status  fl">报名中</div>
                        <div class="applyCount  fl">已报名416人</div>
                    </div>
                    <div class="viewed fr">
                        <div class="img fl">
                            <img src="__CDN__/assets/img/enter/skim.png" alt="浏览" class="skim">
                        </div>
                        2605
                    </div>
                </div>
            </li>
            <li class="contentList" onclick="lookInfo()">
                <div class="lineOne">
                    <div class="title fl">长春师范大学2020届毕业生线上双选会</div>
                    <div class="time fr">08:00</div>
                </div>
                <div class="lineTwo">
                    <div class="joinCompany fl">参加企业：预计200家，已参加182家</div>
                    <div class="date fr">2020-04-28</div>
                </div>
                <div class="lineThree">
                    <div class="fl">
                        <div class="status  fl">待开始</div>
                        <div class="applyCount  fl">已报名416人</div>
                    </div>
                    <div class="viewed fr">
                        <div class="img fl">
                            <img src="__CDN__/assets/img/enter/skim.png" alt="浏览" class="skim">
                        </div>
                        2605
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
<script>

    $(function () {
        function changeColor() {
            var demo = document.getElementsByClassName('status')
            console.log(demo[0].innerText)
            for (let i = 0; i < demo.length; i++) {
                if (demo[i].innerText === '报名中') {
                    demo[i].style.color = 'rgb(81, 199, 193)'
                } else if (demo[i].innerText === '待开始') {
                    demo[i].style.color = 'rgb(219, 205, 11)'
                }
            }
        }

        changeColor()


        var page = 0; // 当前页下标

        // 搜索内容

        //搜索按钮
        $("#searchBtn").click(function () {
            var searchValue = document.getElementById('searchValue').value; // 搜索值
            $.ajax({
                url: './test.json',
                type: 'POST',
                data: {search: searchValue},
                success: function (res) {
                    setListData(data.list, true);
                }
            })
        });

        // 创建mescroll对象
        var mescroll = new MeScroll('mescroll', { //第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)
            up: {
                callback: getListData, //上拉加载的回调
                //以下是一些常用的配置,当然不写也可以的.
                page: {
                    num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                    size: 5 //每页数据条数,默认10
                },
                noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
                // 避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                // 这就是为什么无更多数据有时候不显示的原因.
                lazyLoad: {
                    use: true // 是否开启懒加载,默认false
                    // attr: 'imgurl' // 标签中网络图的属性名 : <img imgurl='网络图  src='占位图''/>
                }
            }
        })

        function getListData(page) { //上拉加载的回调
            /**
             *  getListDataFromNet 获取数据
             * @param {Number} pageNum:当前页
             * @param {function} successCallback:成功回调
             * @param {function} errorCallback:失败回调
             *
             */
            console.log('callback')
            getListDataFromNet(page.num,
                function (curPageData) { // 成功回调
                    console.log('success');
                    curPageData = curPageData || [];
                    setListData(curPageData); // 设置列表数据
                    mescroll.endSuccess(curPageData.length) // 关闭加载动画
                },
                function (err) { // 失败回调
                    console.log('end');
                    mescroll.endErr()
                });
        }

        /*设置列表数据*/
        function setListData(curPageData, cover) {
            var listDom = document.getElementById('contentList');
            if (cover) {
                listDom.innerHTML = ''; // 清空
            }
            for (var i = 0; i < curPageData.length; i++) {
                var pd = curPageData[i];
                var str = `<div class="lineOne">
                                <div class="title fl">` + pd.duet_name + `</div>
<!--                                <div class="time fr">` + pd.time + `</div>-->
                            </div>`
                str += `<div class="lineTwo">
                            <div class="joinCompany fl">参加企业：预计` + pd.expected_enterprise_number + `家，已参加` + pd.attended + `家</div>
                            <div class="date fr">` + pd.date + `</div>
                        </div>`
                str += `<div class="lineThree">
                            <div class="fl">
                                <div class="status  fl">` + pd.can_sign + `</div>
                                <div class="applyCount  fl">已报名` + pd.applyCount + `人</div>
                            </div>
                            <div class="viewed fr">
                                <div class="img fl">
                                    <img src="__CDN__/assets/img/enter/skim.png" alt="浏览" class="skim">
                                </div>
                                ` + pd.browse_number + `
                            </div>
                        </div>`

                var liDom = document.createElement('li');
                liDom.className = 'contentList';
                liDom.innerHTML = str;

                listDom.appendChild(liDom);
            }
        }

        function getListDataFromNet(pageNum, successCallback, errorCallback) { // 请求后台接口，获取数据
            $.ajax({
                url: "{:url('videoduet')}",
                type: 'GET',
                success: function (res) {
                    console.log('success: ', res)
                    // if (res.cur_page === res.last_page) {return}
                    successCallback && successCallback(res.data.data)
                },
                fail: function (err) {
                    console.log('fail')
                    errorCallback && errorCallback(err);
                }
            })
        }

        // mescroll end
        // 查看详情
        function lookInfo() {
            alert('click')
        }
    })
</script>

</html>